<template>
    <div>
        <van-row>
            <van-col span="24" class="header">
                <van-uploader :after-read="onRead">
                    <van-icon name="photograph" />
                </van-uploader>
                <div class="nameWrap">
                    <span class="username">usn_84asd</span>
                </div>
            </van-col>
        </van-row>
        <van-row class="nav">
            <van-col span="12" class="navinner">
                <div class="navleft">
                    <van-icon name="orders-o" />
                    <b>订单</b>
                </div>
            </van-col>
            <van-col span="12">
                <div class="navright">
                    <van-icon name="idcard" />
                    <b>卡券</b>
                </div>
            </van-col>
            </van-col>
        </van-row>



        <van-cell-group>
            <van-cell title="我的联系人" icon="friends-o" is-link to="path"/>
            <van-cell title="管理收货地址" icon="location-o" is-link />
            <van-cell title="购买说明" icon="warn-o" is-link />
            <van-cell title="关于我们" icon="question-o" is-link />
        </van-cell-group>

       
        <foot></foot>
    </div>
</template>

<script>
    import foot from "@/components/footer.vue";
    export default {
        components: {
            foot
        },

        methods: {
            onRead(file) {
                console.log(file)
            }
        }

    }
</script>

<style scoped>
    .header {
        height: 15rem;
        background-color: #c1c1c1;
        text-align: center;
        padding-top: 3rem;
    }

    .van-icon.van-icon-photograph {
        width: 5rem;
        height: 5rem;
        border: 1px solid #fff;
        text-align: center;
        line-height: 5rem;
        font-size: 4rem;
        border-radius: 50%;
        color: #fff
    }
    .nameWrap{
        padding-top: 1rem;
    }
    .username {
        color: #fff;
       
    }

    .nav {
        height: 3rem;
        border-bottom: 1px solid #ccc;
        padding: 1rem 0;
    }

    .nav .navinner {
        height: 100%;
        display: flex;
        border-right: 1px solid #ccc
    }

    .navleft,
    .navright {
        margin: auto;
        display: flex;
        width: 6rem;
        justify-content: space-between;
    }

    .van-icon.van-icon-orders-o {
        width: 3rem;
        height: 3rem;

        text-align: center;
        line-height: 3rem;
        border-radius: 50%;
        background-color: #fc8686;
        color: #fff;
        font-size: 1.5rem;
    }

    .van-icon.van-icon-idcard {
        width: 3rem;
        height: 3rem;

        text-align: center;
        line-height: 3rem;
        border-radius: 50%;
        background-color: #fc8686;
        color: #fff;
        font-size: 1.5rem;
    }
    
    .navleft b,
    .navright b {
        color: #ccc;
        line-height: 3rem;
    }
    .van-icon.van-icon-friends-o{
        color: #fc8686;
    }
    .van-icon.van-icon-location-o{
        color: #fc8686;
    }
    .van-icon.van-icon-warn-o{
        color: #fc8686;
    }
    .van-icon.van-icon-question-o{
        color: #fc8686;
    }
    </style>